<template>
    <div class="mod-${moduleName}__${classname}">
        <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
        <#list queryList as filed>
            <el-form-item label="${filed.commentSplit!}">
            <#if filed.formType == 'text' || filed.formType == 'textarea' || filed.formType == 'editor'>
                <el-input v-model="state.dataForm.${filed.attrName}" placeholder="${filed.commentSplit!}" clearable></el-input>
            <#elseif filed.formType == 'select'>
            <#if filed.formDict??>
                <ny-select v-model="state.dataForm.${filed.attrName}" dict-type="${filed.formDict}" placeholder="${filed.commentSplit!}"></ny-select>
            <#else>
                <el-select v-model="state.dataForm.${filed.attrName}" placeholder="${colfiledumn.commentSplit!}">
                    <el-option label="选择" value="0"></el-option>
                </el-select>
            </#if>
            <#elseif filed.formType == 'radio'>
            <#if filed.formDict??>
                <ny-radio-group v-model="state.dataForm.${filed.attrName}" dict-type="${filed.formDict}"></ny-radio-group>
            <#else>
                <el-radio-group v-model="state.dataForm.${filed.attrName}">
                    <el-radio :label="0">单选</el-radio>
                </el-radio-group>
            </#if>
            <#elseif filed.formType == 'date'>
                <el-date-picker v-model="state.daterange" type="daterange" value-format="YYYY-MM-DD" :range-separator="$t('datePicker.range')" :start-placeholder="$t('datePicker.start')" :end-placeholder="$t('datePicker.end')"></el-date-picker>
            <#elseif filed.formType == 'datetime'>
                <el-date-picker v-model="state.datetimerange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" :range-separator="$t('datePicker.range')" :start-placeholder="$t('datePicker.start')" :end-placeholder="$t('datePicker.end')"></el-date-picker>
            <#else>
                <el-input v-model="state.dataForm.${filed.attrName}" placeholder="${filed.commentSplit!}" clearable></el-input>
            </#if>
            </el-form-item>
            </#list>
            <el-form-item>
                <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="state.exportHandle()">{{ $t("export") }}</el-button>
            </el-form-item>
            <el-form-item>
                <el-button v-if="state.hasPermission('${moduleName}:${classname}:save')" type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
            </el-form-item>
            <el-form-item>
                <el-button v-if="state.hasPermission('${moduleName}:${classname}:delete')" type="danger" @click="state.deleteHandle()">{{ $t("deleteBatch") }}</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
            <#list gridList as column>
            <#if column.formDict??>
            <el-table-column prop="${column.attrName}" label="${column.commentSplit!}" header-align="center" align="center">
                <template v-slot="scope">
                    {{ state.getDictLabel("${column.formDict}", scope.row.${column.attrName}) }}
                </template>
            </el-table-column>
            <#elseif column.formType == 'uploadImage'>
            <el-table-column prop="${column.attrName}" label="${column.commentSplit!}" header-align="center" align="center">
                <template v-slot="scope">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.${column.attrName}"
                            :preview-src-list="[scope.row.${column.attrName}]"
                            fit="cover"
                    />
                </template>
            </el-table-column>
            <#else>
            <el-table-column prop="${column.attrName}" label="${column.commentSplit!}" header-align="center" align="center"></el-table-column>
            </#if>
            </#list>
            <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="180">
                <template v-slot="scope">
                    <el-button v-if="state.hasPermission('${moduleName}:${classname}:update')" type="primary" text bg @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
                    <el-button v-if="state.hasPermission('${moduleName}:${classname}:delete')" type="primary" text bg @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
    </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./${classname}-add-or-update.vue";

const view = reactive({
    getDataListURL: "/${moduleName}/${classname}/page",
    getDataListIsPage: true,
    exportURL: "/${moduleName}/${classname}/export",
    deleteURL: "/${moduleName}/${classname}",
    deleteIsBatch: true,
    <#list queryList as column>
    <#if column.formType == 'date'>
    daterange: null,
    <#elseif column.formType == 'datetime'>
    datetimerange: null,
    </#if>
    </#list>
    dataForm: {
        <#list queryList as column>
        <#if column.formType == 'date'>
        startDate: null as number | null,
        endDate: null as number | null,
        <#elseif column.formType == 'datetime'>
        startDateTime: null as number | null,
        endDateTime: null as number | null,
        <#else>
        ${column.attrName}: "",
        </#if>
        </#list>
    }
});

const state = reactive({ ...useView(view), ...toRefs(view) });

<#list queryList as column>
<#if column.formType == 'date'>
watch(
    () => state.daterange,
    (val: number[] | null) => {
        if (val === null) {
            state.dataForm.startDate = null;
            state.dataForm.endDate = null;
        } else {
            state.dataForm.startDate = val[0];
            state.dataForm.endDate = val[1];
        }
    }
);
<#elseif column.formType == 'datetime'>
watch(
    () => state.datetimerange,
    (val: number[] | null) => {
        if (val === null) {
            state.dataForm.startDateTime = null;
            state.dataForm.endDateTime = null;
        } else {
            state.dataForm.startDateTime = val[0];
            state.dataForm.endDateTime = val[1];
        }
    }
);
</#if>
</#list>

const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (${pk.attrName}?: number) => {
    addKey.value++;
    nextTick(() => {
        addOrUpdateRef.value.init(${pk.attrName});
    });
};
</script>
